<template>
	<view class="page flex-col">
		<view class="block_1 flex-col">
			<view class="box_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<view class="box_2 flex-col">
					<!-- // q_type 平台1 场馆2 新人3 -->
					<!-- //type 代金券1 满减券2 折扣券3 -->
					<!-- 平台 -->
					<view class="group_1 flex-col">
						<view class="box_4 flex-row" v-if="resultlist.type == 1">
							<text class="text_2">¥</text>
							<text class="text_3">{{resultlist.jian}}</text>
							<view class="text-wrapper_1">
								<text class="paragraph_1">
									仅剩
									<br />
								</text>
								<view class="">
									<text class="text_4">{{resultlist.stock}}</text>
									<text class="text_5">张</text>
								</view>
							</view>
						</view>
						<view class="text-wrapper_2 flex-row" v-if="resultlist.type == 1">
							<text class="text_6">{{resultlist.man}}元代金券</text>
						</view>
						<!-- 场馆 -->
						<view class="box_4 flex-row" v-if="resultlist.type == 2">
							<text class="text_2">¥</text>
							<text class="text_3">{{resultlist.jian}}</text>
							<view class="text-wrapper_1">
								<text class="paragraph_1">
									仅剩
									<br />
								</text>
								<view class="">
									<text class="text_4">{{resultlist.stock}}</text>
									<!-- <text>张</text> -->
									<text class="text_5">张</text>
								</view>
							</view>
						</view>
						<view class="text-wrapper_2 flex-row" v-if="resultlist.type == 2">
							<text class="text_6">{{resultlist.man}}元满减券</text>
						</view>
						<!-- 新人 -->
						<view class="box_4 flex-row" v-if="resultlist.type == 3">
							<text class="text_2"></text>
							<text class="text_3">{{resultlist.jian}}折</text>
							<view class="text-wrapper_1">
								<text class="paragraph_1">
									仅剩
									<br />
								</text>
								<view class="">
									<text class="text_4">{{resultlist.stock}}</text>
									<!-- <text>张</text> -->
									<text class="text_5">张</text>
								</view>
							</view>
						</view>
						<view class="text-wrapper_2 flex-row" v-if="resultlist.type == 3">
							<text class="text_6">{{resultlist.man}}元折扣券</text>
						</view>
					</view>
				<scroll-view scroll-y="true" class="scroll">
					<view class=""
						style="width: 100%;height: auto;background-color: #fff;padding: 0 20rpx;width: 92%;margin-left: 4%">
						<view class="group_2 flex-row">
							<view class="section_2 flex-col justify-between">
								<view class="section_3 flex-col"></view>
								<view class="section_4 flex-col"></view>
							</view>
							<text class="text_7">基本属性</text>
							<view class="section_5 flex-col justify-between">
								<view class="section_6 flex-col"></view>
								<view class="section_7 flex-col"></view>
							</view>
						</view>
						<view class="text_8">
							1、活动时间
						</view>
						<view class="text_9">
							{{resultlist.can_get_time}}
						</view>
						<view class="text_8">
							2、使用时间
						</view>
						<view class="text_9">
							{{resultlist.use_time}}
						</view>
						<view class="text_8">
							3、参与会员
						</view>
						<view class="text_9">
							{{resultlist.vip}}
						</view>
						<view class="text_8">
							4、指定使用品类
						</view>
						<view class="text_9">
							{{resultlist.windows}}
						</view>
						<view class="text_8">
							5、使用门槛
						</view>
						<view class="text_9">
							{{resultlist.man}}
						</view>

						<view class="group_3 flex-row">
							<view class="section_8 flex-col justify-between">
								<view class="block_2 flex-col"></view>
								<view class="block_3 flex-col"></view>
							</view>
							<text class="text_10">规则说明</text>
							<view class="section_9 flex-col justify-between">
								<view class="section_10 flex-col"></view>
								<view class="section_11 flex-col"></view>
							</view>
						</view>
						<view class="text_8">
							5、使用门槛
						</view>
						<view class="text_9">
							{{resultlist.des}}
						</view>
					</view>
					</scroll-view>
				</view>

				<view class=""
					style="width: 100%;height: 140rpx;background-color: rgb(255, 238, 211);position: fixed;bottom: 0;left: 0;">
					<button class="button_1 flex-col" @click="onClick_1" v-if="itemlist.else_stock>0">
						<text class="text_16">立即领取</text>
					</button>
					<button class="button_2 flex-col" @click="onClick_1" v-else>
						<text class="text_16">已领完</text>
					</button>
				</view>


				<!-- 弹窗 -->
				<!-- // q_type 平台1 场馆2 新人3 -->
				<!-- //type 代金券1 满减券2 折扣券3 -->
				<view class="box_111 flex-col" v-if="box_111">
					<view class="box_2 flex-row" :class="itemlist.q_type == 1 ? 'box_2' : 'box_2_2'">
						<!-- 平台 -->
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 1">
							<!-- 代金券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 1">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
							<!-- 减券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 2">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
							<!-- 折扣券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 3">
								<text class="text_1"></text>
								<text class="text_2">{{itemlist.jian}}折</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
						</view>

						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 1">
							<text class="text_4">全场抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view>
						<!-- 场馆 -->
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 2">
							<!-- 代金券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 1">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
							<!-- 减券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 2">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
							<!-- 折扣券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 3">
								<text class="text_1"></text>
								<text class="text_2">{{itemlist.jian}}折</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
						</view>
						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 2">
							<text class="text_4">场馆抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view>
						
						<!-- 新人 -->
						<!-- 代金券 -->
						<view class="text-wrapper_1" v-if="itemlist.type == 3">
							<text class="text_1">¥</text>
							<text class="text_2">{{itemlist.jian}}</text>
						</view>
						<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元代金券</text>
						<!-- 减券 -->
						<view class="text-wrapper_1" v-if="itemlist.type == 3">
							<text class="text_1">¥</text>
							<text class="text_2">{{itemlist.jian}}</text>
						</view>
						<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元满减券</text>
						<!-- 折扣券 -->
						<view class="text-wrapper_1" v-if="itemlist.type == 3">
							<text class="text_1"></text>
							<text class="text_2">{{itemlist.jian}}折</text>
						</view>
						<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
						
						<!-- 
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 3">
							<view class="text-wrapper_1">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
						</view>
						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 3">
							<text class="text_4">新人抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view> -->
						<image @click="box_open" class="icon_11" referrerpolicy="no-referrer"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/eb1eebfd593afbcce3c105098da1c48e231045d5.png" />
					</view>
					<image @click="box_close" class="icon_1" referrerpolicy="no-referrer"
						:class="itemlist.q_type == 1 ? 'icon_1' : 'icon_1_1'"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/dab4b52d01ac2d9220cd1547e7494656a517d6cf.png" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "优惠券",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				constants: {},
				box_111: false,
				id: '',
				resultlist: {},
				itemlist: {}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getCouponDetail()
		},
		methods: {
			async getCouponDetail() {
				let postData = {
					id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await market.getCouponDetail(postData);
				if (res.code == 1) {
					this.resultlist = res.data.result
				}
			},
			// onClick_1() {
			// 	this.box_111 = true
			// },
			onClick_1() {
				let datas = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					coupon_id: this.id
				};
				market.insertCouponRecord(datas).then(result => {
					if (result.code == 1) {
						this.itemlist = this.resultlist
						this.box_111 = true
					}
				})
			},
			box_close() {
				this.box_111 = false
			},
			box_open() {
				uni.navigateTo({
					url: '/pages/venues/index'
				})
			},
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100vh;
		overflow: hidden;

		.block_1 {
			height: 100%;
			/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/00a51565391ed09065952f4dc8105d6f89548cd7.png') 100% no-repeat; */
			/* background-size: 100% 100%; */
			width: 750rpx;

			.box_111 {
				background-color: rgba(0, 0, 0, 0.6);
				width: 750rpx;
				/* height: 1624rpx; */
				height: 100%;
				position: absolute;
				z-index: 999;

				.box_2 {
					width: 558rpx;
					height: 616rpx;
					background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ebf35f2fa3b35224f9fbfe7de42abd3e11c5fff7.png') 100% no-repeat;
					background-size: 100% 100%;
					margin: 468rpx 0 0 92rpx;

					.text-group_1 {
						width: 100rpx;
						height: 97rpx;
						margin: 267rpx 0 0 50rpx;

						.text-wrapper_1 {
							width: 100rpx;
							height: 59rpx;
							overflow-wrap: break-word;
							font-size: 0;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: center;
							white-space: nowrap;
							line-height: 35rpx;

							.text_1 {
								width: 100rpx;
								height: 59rpx;
								overflow-wrap: break-word;
								color: rgba(241, 16, 49, 1);
								font-size: 35rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 35rpx;
							}

							.text_2 {
								width: 100rpx;
								height: 59rpx;
								overflow-wrap: break-word;
								color: rgba(241, 16, 49, 1);
								font-size: 45rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 80rpx;
							}
						}

						.text_3 {
							width: 92rpx;
							height: 19rpx;
							overflow-wrap: break-word;
							color: rgba(203, 155, 105, 1);
							font-size: 20rpx;
							font-family: SourceHanSansSC-Normal;
							font-weight: NaN;
							text-align: center;
							white-space: nowrap;
							line-height: 20rpx;
							margin: 35rpx 0 0 8rpx;
						}
					}

					.text-group_2 {
						width: 224rpx;
						height: 60rpx;
						margin: 283rpx 102rpx 0 90rpx;

						.text_4 {
							width: 152rpx;
							height: 29rpx;
							overflow-wrap: break-word;
							color: rgba(163, 98, 32, 1);
							font-size: 30rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: center;
							white-space: nowrap;
							line-height: 30rpx;
							margin-left: 30rpx;
						}

						.text_5 {
							width: 224rpx;
							height: 16rpx;
							overflow-wrap: break-word;
							color: rgba(203, 155, 105, 1);
							font-size: 20rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: center;
							white-space: nowrap;
							line-height: 20rpx;
							margin-top: 15rpx;
						}
					}

					.icon_11 {
						position: absolute;
						z-index: 99;
						width: 280rpx;
						height: 70rpx;
						margin: 490rpx 0 45rpx 128rpx;
					}
				}

				.icon_1 {
					width: 70rpx;
					height: 70rpx;
					margin: 25rpx 0 445rpx 340rpx;
				}

			}

			.box_1 {
				background-color: rgba(255, 238, 221, 1);
				width: 750rpx;
				height: 100%;

				.box_2 {
					
					.scroll{
						width: 100%;
						height: 60vh;
					}

					.group_1 {
						height: 250rpx;
						background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d4d5a7378bab8c30febc39ddf4ff38d10fca5683.png') 100% no-repeat;
						background-size: 100% 100%;
						width: 652rpx;
						justify-content: flex-center;
						margin: 24rpx 0 0 47rpx;

						.box_4 {
							width: 410rpx;
							height: 88rpx;
							margin: 50rpx 0 0 137rpx;

							.text_2 {
								width: 40rpx;
								height: 57rpx;
								overflow-wrap: break-word;
								color: rgba(254, 97, 70, 1);
								font-size: 76rpx;
								font-family: SourceHanSansCN-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 76rpx;
								margin-top: 26rpx;
							}

							.text_3 {
								width: 122rpx;
								height: 88rpx;
								overflow-wrap: break-word;
								color: rgba(254, 97, 70, 1);
								font-size: 88rpx;
								font-family: SourceHanSansCN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 114rpx;
								margin-left: 14rpx;
							}

							.text-wrapper_1 {
								width: 67rpx;
								height: 54rpx;
								overflow-wrap: break-word;
								font-size: 0;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: center;
								line-height: 23rpx;
								margin: 31rpx 0 0 167rpx;

								.paragraph_1 {
									width: 67rpx;
									height: 54rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 23rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
								}

								.text_4 {
									width: 67rpx;
									height: 54rpx;
									overflow-wrap: break-word;
									color: rgba(254, 97, 70, 1);
									font-size: 26rpx;
									font-family: DIN-Bold;
									/* font-weight: 700; */
									text-align: left;
								}

								.text_5 {
									width: 67rpx;
									height: 54rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 23rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
								}
							}
						}

						.text-wrapper_2 {
							width: 120rpx;
							height: 23rpx;
							margin: 25rpx 0 63rpx 177rpx;

							.text_6 {
								width: 120rpx;
								height: 23rpx;
								overflow-wrap: break-word;
								color: rgba(153, 153, 153, 1);
								font-size: 23rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 23rpx;
								margin-top: 10rpx;
							}
						}
					}

					.group_2 {
						width: 273rpx;
						height: 37rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						padding-top: 20rpx;

						.section_2 {
							width: 46rpx;
							height: 21rpx;
							margin-top: 10rpx;

							.section_3 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 40rpx;
								height: 8rpx;
								margin-left: 6rpx;
							}

							.section_4 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 28rpx;
								height: 8rpx;
								margin-top: 5rpx;
							}
						}

						.text_7 {
							width: 165rpx;
							height: 40rpx;
							overflow-wrap: break-word;
							color: rgba(224, 37, 27, 1);
							font-size: 42rpx;
							text-align: left;
							white-space: nowrap;
							line-height: 25rpx;
							margin-left: 6rpx;
						}

						.section_5 {
							width: 46rpx;
							height: 22rpx;
							margin: 7rpx 0 0 10rpx;

							.section_6 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 40rpx;
								height: 8rpx;
							}

							.section_7 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 28rpx;
								height: 8rpx;
								margin: 6rpx 0 0 18rpx;
							}
						}
					}

					.text_8 {
						width: 100%;
						height: 40rpx;
						overflow-wrap: break-word;
						color: rgba(224, 37, 27, 1);
						font-size: 28rpx;
						font-weight: 500;
						text-align: left;
						line-height: 40rpx;
						margin: 47rpx 0 0 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.text_9 {
						width: 100%;
						height: auto;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1.0);
						font-size: 28rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						/* white-space: nowrap; */
						line-height: 34rpx;
						margin: 10rpx 0 0 20rpx;
						padding-right: 20rpx;
						/* white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis; */
					}

					.group_3 {
						width: 273rpx;
						height: 38rpx;
						margin: 0 auto;
						margin-top: 30rpx;

						.section_8 {
							width: 46rpx;
							height: 21rpx;
							margin-top: 10rpx;

							.block_2 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 40rpx;
								height: 8rpx;
								margin-left: 6rpx;
							}

							.block_3 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 28rpx;
								height: 8rpx;
								margin-top: 5rpx;
							}
						}

						.text_10 {
							width: 164rpx;
							height: 40rpx;
							overflow-wrap: break-word;
							color: rgba(224, 37, 27, 1);
							font-size: 42rpx;
							font-family: zihun152hao-jijiachaojihei;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 15rpx;
							margin-left: 8rpx;
						}

						.section_9 {
							width: 46rpx;
							height: 22rpx;
							margin: 7rpx 0 0 9rpx;

							.section_10 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 40rpx;
								height: 8rpx;
							}

							.section_11 {
								background-color: rgba(224, 37, 27, 1);
								border-radius: 3px;
								width: 28rpx;
								height: 8rpx;
								margin: 6rpx 0 0 18rpx;
							}
						}
					}

				}

				.button_2 {
					background-color: rgba(195, 195, 195, 1.0);
					border-radius: 40px;
					height: 80rpx;
					width: 670rpx;
					margin: 22rpx 0 20rpx 40rpx;

					.text_16 {
						width: 118rpx;
						height: 29rpx;
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 30rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 30rpx;
						margin: 26rpx 0 0 276rpx;
					}
				}

				.button_1 {
					background-color: rgba(254, 97, 70, 1);
					border-radius: 40px;
					height: 80rpx;
					width: 670rpx;
					margin: 22rpx 0 20rpx 40rpx;

					.text_16 {
						width: 118rpx;
						height: 29rpx;
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 30rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 30rpx;
						margin: 26rpx 0 0 276rpx;
					}
				}
			}
		}
	}
</style>